@backgroundColor:#fff;
@textColor5: #fff;
@borderLineColor: #f2f3f5;
@textColor: #323233;

.o-dialog {
  position: absolute;
  box-shadow: 1px 1px 20px rgba(0, 0, 0, .3);
  border-radius: 5px;
  background: @backgroundColor;
  overflow: hidden;transition: all .3s;
  top: 20vh;
  min-width: 400px;
@apply  lg:w-1/3 md:w-1/3 xl:w-1/3 sm:w-full;
.o-dialog-close {
  display: flex;
  position: absolute;
  right: 10px;
  top: 10px;
  height: 20px;
  width: 20px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  &:hover {opacity: .8}
}
.o-ialog-header {
  overflow: hidden;
  font-size: 16px;
  padding-left: 15px;
  position: relative;
  border-bottom: 1px solid @borderLineColor;
  color: @textColor;
  border-radius: 5px 5px 0 0;
  -webkit-user-select: none;
  height: 44px;
  line-height: 44px;
  &.move {cursor: move}
}
.o-dialog-content {
  @apply w-full;
  overflow: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  transition: all .3s;
}
.o-dialog-footer {text-align: right;padding: 10px 20px 20px}
.o-dialog-auto-close {position: absolute; left: 10px; top: 45px;}
.o-dialog-alert {display: flex;justify-content: center;align-items: center;
  i {font-size: 30px;margin-right: 5px;}
  // 其他的需要再定义样式
  // success
  .icon-success {
    &:before {color: green;}
  }
  //failure
  .icon-failure {
    &:before {color: red;}
  }
  //warning
  .icon-tips {
    &:before {color: orange;}
  }
}
  // msg类弹窗
  &.dialog-msg {top: 8px;
  @include ns(dialog-content) {padding: 8px;
    i{font-size: 16px;}}
  }
}
.o-dialog-modal {position: fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 100;display: flex;justify-content: center;background: rgba(55, 55, 55, .6);
  &.modal {background: none}
  &.center {align-items: center;
  .o-dialog {
    top: auto;
  }
  }
}
.o-dialog-isAlert {
  // message类的自动关闭不显示
  min-width: 200px;
.o-dialog-auto-close {
  display: none
}
}
// 遮罩层固定动画，这写法会影响到其他的动画
/*[class*="-enter-active"]{
  animation: modal-fade-in .3s;
}
[class*="-leave-active"]{
  animation: modal-fade-out 0.3s;
}*/
.enterActive() {
  animation: modal-fade-in .3s !important;
}
.leaveActive() {
  animation: modal-fade-out 0.3s;
}
.fade-enter-active {
  // animation: modal-fade-in .3s !important;
  .enterActive();
  .o-dialog {
    animation: dialog-fade-in .3s;
  }
}
.fade-leave-active {
  // animation: modal-fade-out 0.3s;
  .leaveActive();
  .o-dialog {
    animation: dialog-fade-out 0.3s;
  }
}
@keyframes dialog-fade-in {
  0% {
    transform: translate(0, -20px);
    opacity: 0;
  }
}
@keyframes dialog-fade-out {
  100% {
    transform: translate(0, -20px);
    opacity: 0;
  }
}
@keyframes modal-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    // transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes modal-fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
// 放大
.zoom-enter-active {
  // animation: modal-fade-in .3s !important;
  .enterActive();
  .o-dialog {
    animation: dialog-zoom-in .3s;
  }
}
.zoom-leave-active {
  // animation: modal-fade-out 0.3s;
  .leaveActive();
  .o-dialog {
    animation: dialog-zoom-out 0.3s;
  }
}
@keyframes dialog-zoom-in {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes dialog-zoom-out {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}
// 抽屉
.slide-enter-active {
@include enterActive();
  .o-drawer-top {
    animation: dialog-slide-top-in 0.3s;
  }
  .o-drawer-bottom {
    animation: dialog-slide-bottom-in 0.3s;
  }
  .o-drawer-left {
    animation: dialog-slide-left-in 0.3s;
  }
  .o-drawer-right {
    animation: dialog-slide-right-in 0.3s;
  }
}
.slide-leave-active {
@include leaveActive();
  .o-drawer-top {
    animation: dialog-slide-top-out 0.3s;
  }
  .o-drawer-bottom {
    animation: dialog-slide-bottom-out 0.3s;
  }
  .o-drawer-left {
    animation: dialog-slide-left-out 0.3s;
  }
  .o-drawer-right {
    animation: dialog-slide-right-out 0.3s;
  }
}
@keyframes dialog-slide-top-in {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes dialog-slide-top-out {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-100%);
    opacity: 0;
  }
}
@keyframes dialog-slide-bottom-in {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes dialog-slide-bottom-out {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}
@keyframes dialog-slide-left-in {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes dialog-slide-left-out {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}
@keyframes dialog-slide-right-in {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes dialog-slide-right-out {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}
